<script setup lang="ts">
import { computed, ref, watch } from 'vue';

// 定义水果对象的类型
interface Fruit {
  id: number
  icon: string
  isChecked: boolean
  num: number
  price: number
}

// 列表数据持久化到本地
const ListKey = 'ListKey'

// 获取列表数据
const res = localStorage.getItem(ListKey) // 如果没有数据的话为空
let list : Fruit[] = []
// 如果 持久化列表中 数据为空就设值为初始值
if(res===null){
  list = [
  {
    id: 1,
    icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/ll.png',
    isChecked: true,
    num: 2,
    price: 6,
  },
  {
    id: 2,
    icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/smt.png',
    isChecked: false,
    num: 7,
    price: 20,
  },
  {
    id: 3,
    icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/tg.png',
    isChecked: false,
    num: 3,
    price: 40,
  },
  {
    id: 4,
    icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/xg.png',
    isChecked: false,
    num: 10,
    price: 3,
  },
  {
    id: 5,
    icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/yl.png',
    isChecked: false,
    num: 20,
    price: 34,
  },]
}else{
  // 持久化中以字符串形式存进去 拿出来转为对象
  list = JSON.parse(res)
}

// 水果列表
const fruitList = ref<Fruit[]>(list) 

// 侦听器 同步保存数据到 LocalStorage（数组数据发生变化 就执行 watch语句）
watch(
 fruitList,
  ()=>{
  // 把列表数据 存入持久化中 因为是复杂类型 转为字符串结构形式
  localStorage.setItem(ListKey,JSON.stringify(fruitList.value))
},
{
  deep:true // 深层监听
})

// 重置数据
const resetData = ()=>{
  fruitList.value = [
  {
    id: 1,
    icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/ll.png',
    isChecked: true,
    num: 2,
    price: 6,
  },
  {
    id: 2,
    icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/smt.png',
    isChecked: false,
    num: 7,
    price: 20,
  },
  {
    id: 3,
    icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/tg.png',
    isChecked: false,
    num: 3,
    price: 40,
  },
  {
    id: 4,
    icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/xg.png',
    isChecked: false,
    num: 10,
    price: 3,
  },
  {
    id: 5,
    icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/yl.png',
    isChecked: false,
    num: 20,
    price: 34,
  },]
}

// 删除数据
const delId = (id:number)=>{
 fruitList.value = fruitList.value.filter(v=>v.id!=id)
}

// 递减
 const subById = (id:number)=>{
  // 使用 find 根据传入的id找到数组中的数据
const res =  fruitList.value.find(v=>v.id === id)
// 如果个数 小于等于1 就不能在自减了
if(res!.num <= 1){
  return
}
res!.num --
 }

 // 递增
 const addById = (id:number)=>{
  // 使用 find 根据传入的id找到数组中的数据
const res =  fruitList.value.find(v=>v.id === id)
res!.num ++
 }

// 全选属性(只要数据发生变化就会更新)
const isCheckedALl = computed({
  // 取值
  get(){
    // 如果所有数据的选中状态是 true 就更新全选状态
    return fruitList.value.every(v=>v.isChecked)
  },
  // 赋值
  set(value){
    // 如果全选的状态是 true的话 就把所有数据的 状态变成 true
    fruitList.value.forEach(v=>v.isChecked = value)
  }
})


// 总个数
const totalCount = computed(()=>{
  // 选中的
  return fruitList.value.filter(v=>v.isChecked).reduce((priv,cur)=>priv+cur.num,0)
})

// 总价格
const totalPrice = computed(()=>{
  // 选中的
  return fruitList.value.filter(v=>v.isChecked).reduce((priv,cur)=>priv+cur.num*cur.price,0)
})
</script>

<template>
  <div class="app-container" id="app">
    <!-- 顶部banner -->
    <div class="banner-box"><img src="https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/sg_top.png" alt="" /></div>
    <!-- 面包屑 -->
    <div class="breadcrumb">
      <span>🏠</span>
      /
      <span>购物车</span>
    </div>
    <!-- 购物车主体 -->
    <div v-if="fruitList.length>0" class="main">
      <div class="table">
        <!-- 头部 -->
        <div class="thead">
          <div class="tr">
            <div class="th">选中</div>
            <div class="th th-pic">图片</div>
            <div class="th">单价</div>
            <div class="th num-th">个数</div>
            <div class="th">小计</div>
            <div class="th">操作</div>
          </div>
        </div>
        <!-- 身体 -->
        <div class="tbody">
          <div v-for="item in fruitList" :key="item.id" class="tr active">
            <div class="td"><input v-model="item.isChecked" type="checkbox" checked /></div>
            <div class="td"><img  :src="item.icon" alt="" /></div>  
            <div class="td">{{ item.price }}</div>
            <div class="td">
              <div class="my-input-number">
                <button class="decrease" @click="subById(item.id)"> - </button>
                <span class="my-input__inner">{{ item.num }}</span>
                <button class="increase" @click="addById(item.id)"> + </button>
              </div>
            </div>
            <div class="td">{{item.price * item.num}}</div>
            <div class="td"><button @click="delId(item.id)">删除</button></div>
          </div>
        </div>
      </div>
      <!-- 底部 -->
      <div class="bottom">
        <!-- 全选 -->
        <label class="check-all">
          <input type="checkbox" v-model="isCheckedALl" />
          全选
        </label>
        <div class="right-box">
          <!-- 所有商品总价 -->
          <span class="price-box">总价&nbsp;&nbsp;:&nbsp;&nbsp;¥&nbsp;<span class="price">{{ totalPrice }}</span></span>
          <!-- 结算按钮 -->
          <button class="pay">结算( {{ totalCount }} )</button>
        </div>
      </div>
    </div>
    <!-- 空车 -->
    <div @click="resetData" v-else class="empty">🛒空空如也</div>
  </div>
</template>

<style scoped>
@import './style/inputnumber.css';
@import './style/index.css';
</style>